<template>
	<view class="content">
		<u-notice-bar speed=40 color=#FF6347 :text="notice[0].notice"></u-notice-bar>
		<!-- 显示区 -->
		<u-picker :show="showpicker" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		<view class="head_box">
			<view class="user_info_box">
				<view class="user-info">
					<image :src="avatar" mode="" class="win_image"></image>
					<view class="w_head_item">
						{{screen_name}}
					</view>
					<view class="w_head_item">
						{{user_id}}
					</view>
					<image src="/static/balance.png" mode="" class="win_image"></image>
					<view class="w_head_item">
						{{pearl}}
					</view>
					<view class="head_item">
						余额
					</view>

				</view>

				<view class="user-info">
					<image src="/static/success.png" mode="" class="win_image"></image>
					<view class="w_head_item">
						{{win_count}}
					</view>
					<view class="head_item">
						连胜
					</view>

					<image src="/static/income.png" mode="" class="win_image"></image>
					<view class="w_head_item">
						{{profitAndLose}}
					</view>
					<view class="head_item">
						盈亏
					</view>

				</view>

				<view class="user-info">
					<view class="killer_image_view">
						<image src="/static/killer.png" class="win_image" mode=""></image>
						<text>--</text>
						<text style="color: red;">{{time}}秒</text>
						<text>--</text>
					</view>

				</view>

			</view>

		</view>
		<u-button color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" v-if="loginButto"
			@click="login" text="使用手机号码和密码登录"></u-button>
		<view class="button">
			<u-button color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" @click="setting"
				text="定义配置"></u-button>
			<u-button @click="changRoom" text="选择跳房"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
			<u-button v-if="start" type="success" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
				@click="startAuto" text="开始挂机"></u-button>
			<u-button v-if="!start" type="error" @click="stopAuto"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" text="结束挂机"></u-button>
		</view>

		<view class="box">
			<view class="box_item">
				期数
			</view>
			<view class="box_item">
				躲藏
			</view>
			<view class="box_item">
				被刀
			</view>
			<view class="box_item">
				结果
			</view>
			<view class="box_item">
				下注
			</view>
			<view class="box_item1">
				收入
			</view>
		</view>

		<view v-for="item,index in log_info_list" class="box_list">
			<view :class="{box_list_item_killer: item.result==='失败',box_list_item:item.result==='成功'}">
				{{item.games}}
			</view>
			<view :class="{box_list_item_killer: item.result==='失败',box_list_item:item.result==='成功'}">
				{{item.prediction.substr(0,2)}}
			</view>
			<view :class="{box_list_item_killer: item.result==='失败',box_list_item:item.result==='成功'}">
				{{item.kill_room.substr(0,2)}}
			</view>
			<view :class="{box_list_item_killer: item.result==='失败',box_list_item:item.result==='成功'}">
				{{item.result}}
			</view>


			<view :class="{box_list_item_killer: item.result==='失败',box_list_item:item.result==='成功'}">
				{{item.betting}}
			</view>
			<view :class="{box_list_item_killer1: item.result==='失败',box_list_item1:item.result==='成功'}">
				{{item.income}}
			</view>

		</view>

	</view>
</template>

<script>
	import url from "../../js/url.js"
	import avatar from "../../uni_modules/uview-ui/libs/config/props/avatar.js";

	export default {
		data() {
			return {
				start: true,
				avatar: "/static/user.png",
				user_id: null,
				login_user_id: null,
				pearl: null,
				screen_name: null,
				notice: null,
				secret: null,
				token: null,
				loginButto: true,
				time: "0",
				flag: false,
				log_info_list: null,
				is_auto: null,
				win_count: 0,
				profitAndLose: 0,
				intervalId: null,
				showpicker: false,
				columns: [
					['含烟阁', '晴天阁', '碧水间', '听雨楼', '月亮湾']
				],
			}
		},
		onLoad() {
			this.getNotice()
			//取出token
			const value = uni.getStorageSync('token');
			this.token = value
			const user_id = uni.getStorageSync('userId');
			this.user_id = user_id
			const secret = uni.getStorageSync('secret');
			this.secret = secret
			if (this.secret != null) {
				this.loginReq()
			}
			this.intervalId = setInterval(() => {
				if (this.flag) {
					//获取log
					this.getAutoLog()
				}
			}, 3000)

		},
		onShow() {
			//取出token
			const value = uni.getStorageSync('token');
			this.token = value
			const user_id = uni.getStorageSync('userId');
			this.user_id = user_id
			uni.connectSocket({
				url: 'ws://8.134.102.196:10100/websocket',

			});
			//连接已打开
			// uni.onSocketOpen(function(res) {
			// 	that.show = false;
			// });
			//收到服务器
			var that = this;
			uni.onSocketMessage(function(res) {
				if (res.data instanceof ArrayBuffer) {
					let decoder = new TextDecoder("utf-8")
					let str = decoder.decode(res.data)
					var result = JSON.parse(str);
					if (result.cmdMerge == 99) {
						var byteArray = new Uint8Array(result.data)
						let str1 = decoder.decode(byteArray)
						var result1 = JSON.parse(str1);
						var time1 = result1 - 10
						if (time1 >= 0) {
							that.time = time1
						}
					}
				}
			});
		},
		methods: {
			confirm(e) {
				//选择调	房
				var index = e.value[0]
				console.log(index)
				uni.request({
					url: 'http://' + url + '/autoplay/chang',
					header: {
						//自定义请求头信息
						'authentication': this.token
					},

					method: 'POST',
					data: {
						roomName: index,
					},
					success: (res) => {
						this.showpicker = false
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
						});
					}
				})
			},
			cancel() {
				this.showpicker = false
			},

			changRoom() {
				if (this.flag) {
					this.showpicker = true
				} else {
					uni.showToast({
						title: "请先登录！",
						duration: 3000,
						icon: "error"
					});
				}
			},
			getAutoLog() {

				uni.request({
					url: 'http://' + url + '/autoplay/autologs',
					header: {
						//自定义请求头信息
						'authentication': this.token
					},
					data: {
						user_id: this.user_id,
					},
					success: (res) => {
						this.log_info_list = res.data.data
						this.pearl = this.log_info_list[0].balance
						this.profitAndLose = this.log_info_list[0].profitAndLose
						this.win_count = this.log_info_list[0].win_count
					}
				})
			},
			startAuto() {

				if (this.flag) {
					this.start = false
					uni.request({
						url: 'http://' + url + '/autoplay/start',
						header: {
							//自定义请求头信息
							'authentication': this.token
						},

						method: 'POST',
						data: {
							user_id: this.user_id,
							is_auto: 1
						},
						success: (res) => {
							uni.showToast({
								title: "开启成功，当前期之后下注",
								duration: 4000,
							});
						}
					})
				} else {
					uni.showToast({
						title: "请先登录！",
						duration: 3000,
						icon: "error"
					});
				}
			},
			stopAuto() {
				this.start = true
				uni.request({
					url: 'http://' + url + '/autoplay/start',
					header: {
						//自定义请求头信息
						'authentication': this.token
					},

					method: 'POST',
					data: {
						user_id: this.user_id,
						is_auto: 0
					},
					success: (res) => {
						uni.showToast({
							title: "当前期结束后自动关闭",
							duration: 2000,
						});
					}
				})
			},
			setting() {
				if (this.flag) {
					uni.navigateTo({
						url: '/pages/setting/setting'
					});
				} else {
					uni.showToast({
						title: "请先登录！",
						duration: 3000,
						icon: "error"
					});
				}

			},

			loginReq() {
				uni.showLoading({
					title: '登录中'
				});
				//发起登录请求
				uni.request({
					url: 'http://' + url + '/autoplay/login',
					header: {
						//自定义请求头信息
						'authentication': this.token
					},
					data: {
						secret: this.secret
					},
					method: "POST",
					success: (res) => {

						uni.hideLoading()
						//成功
						res.data.data
						if (res.data.code == 1) {
							this.login_user_id = res.data.data.user_id
							this.is_auto = res.data.data.is_auto
							if (this.user_id != this.login_user_id) {
								//id不一致
								//清除缓存
								try {
									uni.clearStorageSync();
								} catch (e) {
									// error
								}
								this.start = true
								this.loginButto = true
								this.flag = false
								uni.showToast({
									title: "自动挂机、开通ID须一致",
									duration: 3000,
									icon: "error"
								});
								return;
							}
							if (this.is_auto == 1) {
								this.start = false
							}
							this.loginButto = false
							this.flag = true
							this.avatar = res.data.data.avatar
							this.screen_name = res.data.data.screen_name
							this.pearl = res.data.data.pearl
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							});
						}
						//失败
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: "error"
							});
						}

					}
				});
			},

			login() {

				uni.showModal({
					title: '请填入格式使用@分割',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '卡帕ID@手机号码@密码', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '登录中'
							});
							this.secret = res.content
							try {
								uni.setStorageSync('secret', this.secret);
							} catch (e) {
								// error
							}
							this.loginReq()
						}
					}
				});
			},
			getNotice() {
				//获取通知
				uni.request({
					url: 'http://' + url + '/record/notice',
					success: (res) => {
						// this.text = 'request success';
						this.notice = res.data.data
					}
				});
			}
		}
	}
</script>

<style>
	.killer_image_view {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.box_list_item_killer1 {
		background-color: #dd6161;
		width: 25%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid black;
	}

	.box_list_item_killer {
		background-color: #dd6161;
		width: 15%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid black;
	}

	.popup_class {
		width: 70%;
		height: 70%;
		padding: 60rpx;

	}

	.button {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
	}


	.user-info {

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx;

	}

	.box_list_item1 {
		width: 25%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #dbf1e1;
		border: 1rpx solid black;
	}

	.box_list_item {
		width: 15%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #71d5a1;
		border: 1rpx solid black;
	}

	.box_list {
		margin-top: 25rpx;
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		height: 40rpx;
	}

	.win_image {
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;

	}


	.login {
		margin-left: 5rpx;
		width: 20%;
	}

	.w_head_item {
		color: darkorange;
		margin-left: 5rpx;
		margin-right: 5rpx;
	}

	.killer_image {
		border-radius: 20rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.head_box {
		margin-top: 15rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		background-color: aliceblue;
		padding: 10rpx;
		border-radius: 25rpx;
	}

	.box_item1 {
		width: 25%;
		height: 50rpx;
		border: 1rpx solid black;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: lightpink;

	}

	.box_item {
		width: 15%;
		height: 50rpx;
		border: 1rpx solid black;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: lightpink;

	}

	.box {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		height: 40rpx;
	}

	.item_h1 {
		width: 100%;
		height: 500rpx;
		color: skyblue;
	}
</style>